<!-- Overall performance -->
<div *ngIf="overallPerformance">
    <h3>Summary</h3>

    <div class="d-flex flex-row align-items-stretch card-group shadow">
        <div class="card w-50">
            <div class="card-body pb-3">
                <h5>Overall Performance</h5>

                <span class="current-rating">{{ overallPerformance.score }}</span>
                <span class="max-rating">/100</span>
                <span class="current-assessment">{{ assessmentList[overallPerformance.assesment] }}</span>
                <div intervalChart [chartID]="'intervalchart'" [alphas]="1" [clusters]="summaryClusters" [companyCode]="overallPerformance.assesment" [currentValue]="overallPerformance.score" [arrowPositionY]="-7" style="position: relative">
                    <div id="intervalchart"></div>
                    <div id='intervalchartAxis' style="height: 20px;margin-top: -20px;"></div>
                </div>


                <div class="row mt-5">
                    <div class="col-5">
                        <h5>Outlook</h5>
                        <span *ngIf="governanceProfile && governanceProfile.fullProfile == true && outlook[overallPerformance.outlook]" class="current-assessment">
                            {{ outlook[overallPerformance.outlook] }}
                            <img [attr.src]="'/assets/icons-svg/icon-outlook-'+(outlook[overallPerformance.outlook]).toLowerCase()+'.svg'" class="outlook-icon ml-2" />
                        </span>
                        <span *ngIf="(governanceProfile && governanceProfile.fullProfile == false) || !outlook[overallPerformance.outlook]" class="current-assessment">N/A</span>
                    </div>
                    <div *ngIf="summaryRelativePerformance" class="col-7">
                        <h5>Regional Percentile</h5>
                        <span class="current-assessment">{{ summaryRelativePerformance.percentile }}</span>
                        <span class="max-rating">{{getPercentileOrdinal() }} &nbsp; {{ summaryRelativePerformance.region }}</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="card w-50 right-card">
            <ul class="list-group list-group-flush" *ngIf="fullRelativePerformance">
                <li *ngFor="let issue of fullRelativePerformance.issues" [routerLink]="['../issue', issue.number]" class="list-group-item pointer pl-4">
                    <div class="row d-flex align-items-center">
                        <div class="col-5 text-link pillar-size">{{ issue.name }}</div>
                        <div class="col-4">
                            <span class="pillar-assessment">{{ assessmentList[issue.assesmentType] }}</span>
                        </div>
                        <div class="col-3">
                            <span class="pillar-current-rating">{{ issue.score }}</span>
                            <span class="pillar-max-rating">/100</span>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- Analyst View -->
<div *ngIf="governanceProfile && overallPerformance && overallPerformance.analystView" class="mt-5">
    <h3 *ngIf="governanceProfile.fullProfile">Analyst View</h3>
    <h3 *ngIf="!governanceProfile.fullProfile">Overview</h3>
    <div class="card shadow card-body" [innerHtml]="overallPerformance.analystView"></div>
</div>

<div *ngIf="summaryRelativePerformance" class="mt-5">
    <h3>Relative Performance</h3>
    <div class="card shadow card-body">
        <div class="row">
            <div class="col-6">
                <div class="d-flex mb-2">
                    <div class="mr-auto bold">Top 5 companies</div>
                    <div class="ml-auto pr-3">Score</div>
                </div>
                <ul *ngFor="let company of summaryRelativePerformance.topFive; let i = index;" class="list-group">
                    <li class="list-group-item d-flex relative-item">
                        <div class="mr-auto">{{ i + 1 }}. {{ company.companyName }}</div>
                        <div class="ml-auto">{{ company.score | number:'1.0-0' }}</div>
                    </li>
                </ul>
            </div>
            <div class="col-6">
                <div class="d-flex mb-2">
                    <div class="mr-auto bold">Peers (Market cap ${{ summaryRelativePerformance.marketCapRangeFrom | number:'1.0-1' }} - ${{ summaryRelativePerformance.marketCapRangeTo
                        | number: '1.0-1' }}bn)</div>
                    <div class="ml-auto pr-3">Score</div>
                </div>
                <ul *ngFor="let company of summaryRelativePerformance.peers; let i = index;" class="list-group">
                    <li class="list-group-item d-flex relative-item">
                        <div class="mr-auto">{{ i + 1 }}. {{ company.companyName }}</div>
                        <div class="ml-auto">{{ company.score | number:'1.0-0' }}</div>
                    </li>
                </ul>
            </div>
        </div>

        <div *ngIf="fullRelativePerformance" class="mt-4">

            <div class="mt-4 mb-2 row d-flex align-items-end bold">
                <div class="col-4">Pillar</div>
                <div class="col-8">
                    <div class="row d-flex align-items-end">
                        <div class="col">Score</div>
                        <div class="col text-center">
                            Regional Percentile
                            <h6>{{ summaryRelativePerformance.region }}</h6>
                            <h6>{{ fullRelativePerformance.noOfRegionCompanies }} companies</h6>
                        </div>
                        <div class="col text-center">
                            Industry Percentile
                            <h6>{{ fullRelativePerformance.noOfIndustryCompanies }} companies</h6>
                        </div>
                    </div>
                </div>
            </div>

            <div *ngFor="let issue of fullRelativePerformance.issues; let index = index" class="row d-flex align-items-center mb-2 item-link p-2 bg-light-grey">
                <div class="col-4">
                    <div class="d-flex align-items-center" [routerLink]="['../issue', issue.number]">
                        <img [attr.src]="getIssueIcon(issue.name)" class="issue-icon mr-3" />
                        <span class="text-link">{{ issue.name }}</span>
                    </div>
                </div>
                <div class="col-8">
                    <div class="row">
                        <div class="col">
                            <span class="mr-2">{{ issue.score }}</span>
                            <span>{{ assessmentList[issue.assesmentType] }}</span>
                        </div>
                        <div class="col text-center">
                            {{ issue.regionPercentile }}
                        </div>
                        <div class="col text-center">
                            {{ issue.industryPercentile }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>